<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">

        <div class="main-container">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">主要信息</li>
                            <li>商品详情</li>
                            <li>销售设置</li>
                            <li>规格属性</li>
                        </ul>
                        <div class="layui-tab-content">

                            <div class="layui-tab-item layui-show" style="padding-top: 30px;padding-bottom: 50px;">

<div class="layui-form-item">
    <label class="layui-form-label">名称：</label>
    <div class="layui-input-block">
        <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">编码：</label>
    <div class="layui-input-block">
        <input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="请输入商品编码" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">价格：</label>
    <div class="layui-inline">
        <input type="number" name="price" lay-verify="required" value="0.00" autocomplete="off" placeholder="请输入商品编码" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">库存：</label>
    <div class="layui-inline">
        <input type="number" name="number" lay-verify="required" value="50" autocomplete="off" placeholder="库存" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品分类：</label>
    <div class="layui-input-inline">
        <select name="first_category_id" lay-filter="first_category" lay-verify="custom_required"
                lay-verType="tips" switch-tab="0" verify-msg="请选择分类">
            <option value="">请选择分类</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="second_category_id" lay-filter="second_category" lay-verify="custom_required"
                lay-verType="tips" switch-tab="0" verify-msg="请选择分类">
            <option value="">请选择分类</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="third_category_id" lay-filter="third_category" lay-verify="custom_required"
                lay-verType="tips" switch-tab="0" verify-msg="请选择分类" lay-filter="first_category">
            <option value="">请选择分类</option>
        </select>
    </div>
</div>

<div class="layui-form-item" style="margin-bottom: 0px">
    <label class="layui-form-label">商品主图：</label>
    <div class="layui-inline">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
          </div>
        </div> 
    </div>
</div>

<div class="layui-form-item" style="margin-bottom: 0px">
    <label class="layui-form-label">商品相册：</label>
    <div class="layui-inline">

        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test2">多图片上传</button> 
          <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
         </blockquote>
        </div>

    </div>
</div>

                            </div>
                            <!-- 详情容器 -->
                            <div class="layui-tab-item" style="padding-top: 30px;padding-bottom: 50px;">

<div class="layui-form-item">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
        <textarea name="content" id="content" style="min-height:300px;width: 100%;display: none;"></textarea>
                        
        <div id="divedit">
        </div>

    </div>
</div>
                                
                            </div>
                            <!-- 销售属性容器 -->
                            <div class="layui-tab-item">
<div class="layui-form-item">
    <label class="layui-form-label">虚拟销量：</label>
    <div class="layui-input-inline">
        <input type="text" name="virtual_sales_sum" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">库存预警：</label>
    <div class="layui-input-inline">
        <input type="text" name="stock_warn" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item"><label class="layui-form-label"></label><span style="color: #a3a3a3;font-size: 9px">设置最低库存预警值，当库存低于预警值时会出现在库存预警商品列表页，0为不预警。</span></div>
<div class="layui-form-item">
    <label class="layui-form-label">库存显示：</label>
    <div class="layui-input-block">
        <input type="radio" name="is_show_stock" value="1" title="显示" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>显示</div></div>
        <input type="radio" name="is_show_stock" value="0" title="不显示"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>不显示</div></div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">快递运费：</label>
    <div class="layui-input-inline">
        <input type="radio" name="free_shipping_type" value="1" title="包邮" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>包邮</div></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
            <input type="radio" name="free_shipping_type" value="2" title="统一运费"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>统一运费</div></div>
        </div>
        <div class="layui-input-inline" style="width: 110px">
            <input type="number" name="free_shipping" class="layui-input">
        </div>
        <div class="unit-tips">元</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
            <input type="radio" name="free_shipping_type" value="3" title="运费模板"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>运费模板</div></div>
        </div>
        <div class="layui-input-inline" style="width: 110px">
            <select name="free_shipping_template_id"><option value="">请选择运费模板</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择运费模板" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips layui-this">请选择运费模板</dd></dl></div>
        </div>

    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">商品标签：</label>
    <div class="layui-input-inline">
        <input type="checkbox" name="is_new" lay-skin="primary" title="新品推荐"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>新品推荐</span><i class="layui-icon layui-icon-ok"></i></div>
        <input type="checkbox" name="is_best" lay-skin="primary" title="好物优选"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>好物优选</span><i class="layui-icon layui-icon-ok"></i></div>
        <input type="checkbox" name="is_like" lay-skin="primary" title="猜你喜欢"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>猜你喜欢</span><i class="layui-icon layui-icon-ok"></i></div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label"><span class="form-label-asterisk">*</span>销售状态：</label>
    <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="立即上架" verify-msg="选择销售状态" lay-verify="status"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>立即上架</div></div>
        <input type="radio" name="status" value="0" title="放入仓库" verify-msg="选择销售状态" lay-verify="status" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>放入仓库</div></div>
    </div>
</div>
                            </div>
                            <!-- 属性规格容器 -->
                            <div class="layui-tab-item" style="padding-top: 30px;padding-bottom: 50px;">
<!--form项目开始-->
    <header style="padding: 5px">
        <h2>组合属性-编辑</h2>
    </header>

    <div id="spec_names" class="self_container">
        属性名：
        <ul>
        </ul>
        <div>
            
            <span class="con hide">
                <div class="layui-inline">
                <input type="text" id="sname" class="layui-input">
                </div>
                <button type="button" class="pear-btn pear-btn-primary pear-btn-md" onclick="addSpecName()">确定</button>
            </span>
            <span class="add pear-btn pear-btn-primary pear-btn-md" onclick="add(this)">+</span>
        </div>
    </div>
    <div id="spec_list">
    </div>
    <div style="padding:20px 0 ">
        <button type="button" class="pear-btn pear-btn-primary pear-btn-md" onclick="addgroup()">新增属性组</button>
    </div>
<!--     <div id="spec_group_list">
        <ul></ul>
    </div> -->
<!--  属性提交部分 暂时注释
    <div style="padding:20px 0">
        <form method="post" id="testform">
            <input type="" name="a" value="12">
        </form>
        <button type="button" onclick="specAgree()">确认</button>
    </div>
-->
    <script id="spec_items_tmp" type="html/text">
    <div id="spec_items_{{id}}" class="spec_items" for="{{name}}">
        属性条：
        <dl>
            <dt>{{name}}：</dt>
        </dl>
        <div>
            

            <span class="con hide">
                <div class="layui-inline">
                <input class="layui-input" type="text" id="sitem_{{id}}">
                </div>
                <button class="pear-btn pear-btn-primary pear-btn-md" type="button" onclick="addSpecItem('{{name}}',{{id}})">确定</button>
            </span>
            <span class="add pear-btn pear-btn-primary pear-btn-md" onclick="add(this)">+</span>
        </div>
    </div>
    </script>
    <script id="item_tmp" type="text/html">
        <dd onclick="activedd(this,'{{spec_name}}')">{{name}}</dd>
    </script>

<!-- 
        <li>{{name}}
            <input type="number" onchange="savegroupnum(this)" id="{{name}}_num" value="{{num}}" group-name="{{name}}" placeholder="库存">
            <input type="number" onchange="savegroupprice(this)" id="{{name}}_price" value="{{price}}" group-name="{{name}}" placeholder="价格">
            <span onclick="deletegroup('{{name}}',this)">-</span>
        </li>
-->
    <script id="g_item_tmp" type="text/html">
            <tr id="{{auto_id}}_group">
                <td>
                    <span class="pear-btn pear-btn-primary pear-btn-md" onclick="deletegroup('{{name}}',this,'{{auto_id}}_group')">-</span>
                    {{name}}
                </td>
                <td>
                    <div class="goods-spec-img-div">
                        <input name="spec_image[]" type="hidden" value=""><img src="/admin/plug/speclist/images/goods-lists-add-image.png" class="goods-spec-img-add">
                    </div>
                </td>
                <td>
                    <input type="number" onchange="savegroupprice(this)" id="{{name}}_price" value="{{price}}" group-name="{{name}}" placeholder="价格" class="layui-input" lay-verify="more_spec_required|more_cost_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入价格" >
                </td>

                <td>
                    <input type="number" onchange="savegroupnum(this)" id="{{name}}_num" value="{{num}}" group-name="{{name}}" placeholder="库存" class="layui-input" lay-verify="more_spec_required|more_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入库存" >
                </td>
                
                <td>
                    <input type="number" onchange="savegroupsku(this)" id="{{name}}_price" value="{{price}}" group-name="{{name}}" placeholder="自定义SKU" class="layui-input" lay-vertype="tips" autocomplete="off" switch-tab="1" >
                </td>
                
            </tr>

    </script>

    <style type="text/css">
        .hide{
            display: none;
        }

        #spec_list dl dd{
            border: #ccc 1px solid;
        }
        #spec_list dd{
            height: 34px;
            display: inline-block;
            line-height: 34px;
            padding: 0 10px;
            font-size: 12.5px;
        }
        #spec_list dd.active{
            background: #1e9fff;
            color: #fff;
        }
        .spec_items{
            border: #ccc 1px solid;
            padding: 10px 25px;
        }
        #spec_names ul{
                padding: 10px 40px;
        }
        #spec_names ul li{
            background: #1e9fff;
            color: #fff;
            padding: 2px;
            display: inline-block;
            margin: 0 5px;
        }
        #spec_names ul li span{
            padding: 2px;
            border: 1px solid #fff;
            cursor: pointer;
        }
        .self_container{
            border: #ccc 1px solid;
            padding: 10px 25px;
        }
    </style>


<!--form项目end-->


    <label>SKU列表：</label>
    <div>
        <table class="layui-table"> 
            <thead>
                <tr> 
                    <th><lable name="area">属性组</lable></th>
                    <th><lable name="area">图片</lable></th> 
                    <th><lable name="start_num">价格</lable></th> 
                    <th><lable name="start_price">库存</lable></th> 
                    <th><lable>自定义SKU</lable></th>
                </tr>
            </thead>
            <tbody id="spec_group_list">
            <tr>
                <td>
                    
                </td>
                <td>
                    <div class="goods-spec-img-div">
                        <input name="spec_image[]" type="hidden" value=""><img src="/admin/plug/speclist/images/goods-lists-add-image.png" class="goods-spec-img-add">
                    </div>
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入价格" name="price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_cost_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入成本价" name="cost_price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_stock" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入库存" name="stock[]">
                </td>
                
            </tr>
            </tbody>
        <script type="text/html" id="skurowtmp">
            <tr>
                <td attr-name="fields">
                    {{d.fields}}
                    <input type="hidden" name="spec_list[]" value="{{d.indexs}}">
                </td>
                <td>
                    <div class="goods-spec-img-div">
                        <input name="spec_image[]" type="hidden" value=""><img src="/admin/plug/speclist/images/goods-lists-add-image.png" class="goods-spec-img-add">
                    </div>
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入价格" name="price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_cost_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入成本价" name="cost_price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_stock" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入库存" name="stock[]">
                </td>
            </tr>
        </script>
        </table>
<!--         <div class="layui-table-tool-temp"> 
            <button type="button" class="pear-btn pear-btn-primary pear-btn-md" id="addSku"> 
                <i class="layui-icon layui-icon-add-1"></i> 新增 
            </button>
        </div> -->
    </div>
</div>


<div id="createsku" style="display: none;max-height: 250px; overflow-y: auto; padding: 5px;">
    <!-- sku组合列表 -->
</div>

                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<style type="text/css">
.layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
}
</style>


    <script type="text/javascript">
        var $ = null;

        // var spec_info = {
        //     "颜色":["白色","红色"]
        // };//属性列表信息
        // var group_list = {
        //     "颜色|白色":{"name":"颜色|白色","num":10,"price":2.25}
        // }//属性组合列表
        
        var spec_info = {};//属性列表信息
        var group_list = {}//属性组合列表

        var auto_id = 1;//自增id
        var group_auto_id = 1;//组合自增id
        
        var select_spec_list = {};//选择临时存储
        function renderSpecList(){
            auto_id = 1;
            group_auto_id = 1;
            //渲染清除容器中的内容
            $('#spec_names').find('ul').html('');
            $('#spec_list').html('');

            for(i in spec_info){
                name = i;
                //属性名
                $('#spec_names').find('ul').append(
                    "<li>"+name+"<span onclick='deletespec(\""+name+"\",this)'>-</span></li>"
                    );
                var data ={"id":auto_id,"name":name};
                
                var tmp = tmpRender('#spec_items_tmp',data);
                //属性条目容器
                $('#spec_list').append(tmp);
                //渲染属性条目
                renderSpecItems(name,spec_info[name])
                auto_id++;
            }
            renderGroupList();

        }
        function renderGroupList(){
            $('#spec_group_list').html('');
            //渲染组合属性
            
            for(ti in group_list){
                // console.log('gli:',group_list[ti])
                // console.log('d:',ti);
                existi = groupItemsChk(ti);
                console.log('t:',ti);

                if(existi){
                    // console.log('g:',group_list[ti])
                    data = group_list[ti];
                    data['auto_id'] = group_auto_id;
                    var tmp = tmpRender('#g_item_tmp',data);
                    $('#spec_group_list').append(tmp);
                    group_auto_id++;
                }
            }
        }
        //检查属性列表
        function groupItemsChk(item_names){
            var parsearr = item_names.split(',');
            // console.log('parse:',parsearr)
            for(i in parsearr){
                console.log(parsearr[i])
                if(!groupItemChk(parsearr[i])){
                    return false;
                }
            }
            return true;
        }
        function groupItemChk(item_name){
            var parsearr = item_name.split('|');
            var specName = parsearr[0];
            var specItem = parsearr[1];
            // console.log('n:',specItem);
            var existSpecName = false;
            var existSpecItem = false;
            for(var i in spec_info){
                if(i==specName){
                    existSpecName = true;
                    for(var ii in spec_info[i]){
                        console.log('i:',ii)
                        if(spec_info[i][ii]==specItem){
                            console.log('ii',specItem);
                            existSpecItem = true;
                        }
                    }
                }
            }
            return existSpecName && existSpecItem;
        }
        function renderSpecItems(spec_name,items){
            for(i in items){
                name = items[i]
                data = {"name":name,"spec_name":spec_name};
                var item_tmp =tmpRender('#item_tmp',data)
                $('*[for="'+spec_name+'"]').find('dl').append(item_tmp);
            }
        }

        function add(obj){
            var con = $(obj).parent().find('.con');
            if(con.hasClass('hide')){
                $(obj).html('-');
                con.removeClass('hide');
            }else{
                $(obj).html('+');
                con.addClass('hide');
            }
        }
        function savegroupnum(obj){
            var _group = $(obj).attr('group-name');
            var _num = $(obj).val();
            if(_num==''){
                return false;
            }
            group_list[_group].num = _num;
            console.log(group_list);
            console.log(_group,'：',_num)
        }
        function savegroupprice(obj){
            var _group = $(obj).attr('group-name');
            var _price = $(obj).val();
            if(_price==''){
                return false;
            }
            group_list[_group].price = _price;
            console.log(group_list);
            console.log(_group,'：',_price)
        }
        function existSpecName(name){
            console.log(spec_info[name]);
            if(typeof spec_info[name]!='undefined'){
                console.log('属性名重复');
                return false;
            }
            return true;
        }
        function existSpecItem(name,spec_name){
            var items = spec_info[spec_name];
            for(i in items){
                if(items[i]==name){
                    return true;
                }
            }
            return false;
        }
        function deletespec(name,ele){
            $(ele).parent().remove();
            delete spec_info[name];
            console.log('nnn:',spec_info);
            renderSpecList();
        }
        function addSpecName(){
            var name = $('#sname').val();
            if(/^\s*$/.test(name)){
                alert('不能为空!');
                return false;
            }
            if(!existSpecName(name)){
                return false;
            }
            $('#spec_names').find('ul').append(
                "<li>"+name+"<span onclick='deletespec(\""+name+"\",this)'>-</span></li>"
                );
            spec_info[name] = [];
            var data ={"id":auto_id,"name":name};
            var tmp = tmpRender('#spec_items_tmp',data);
            $('#spec_list').append(tmp)
            auto_id++;

        }
        function addSpecItem(spec_name,id){
            var name = $('#sitem_'+id).val();
            if(existSpecItem(name,spec_name)){
                return false;
            }
            data = {"name":name,"spec_name":spec_name};
            var item_tmp =tmpRender('#item_tmp',data)
            $('*[for="'+spec_name+'"]').find('dl').append(item_tmp);
            spec_info[spec_name].push(name);
            renderGroupList();//更新组合列表
            console.log(spec_info);
        }
        function activedd(obj,spec_name){
            $(obj).parent().find('dd').removeClass('active')
            $(obj).addClass('active')
            var item = $(obj).html();
            select_spec_list[spec_name] = item;
            console.log(select_spec_list)
        }
        //组合属性是否已经存在
        function existgroup(group){
            //直接比较字符串相同
            for(i in group_list){
                if(i == group){
                    return true;
                }
            }

            //深度比较属性
            group = group.split(',');
            for(i in group_list){
                var _group = i.split(',')
                var _same = compareArr(group,_group);
                if(_same){
                    return true;
                }
            }
            return false;
        }
        function compareArr(a, b){
            a = a.sort().join(',');
            b = b.sort().join(',');
            return a==b;
        }
        function getFormData($form) {
            var unindexed_array = $form.serializeArray();
            var indexed_array = {};

            $.map(unindexed_array, function (n, i) {
              indexed_array[n['name']] = n['value'];
            });

            return indexed_array;
        }
        function specAgree(){
            console.log('group：',group_list);

            console.log('spec_info：',spec_info);
            var data = getFormData($('#testform'));
            data.speclist = spec_info;
            data.group = group_list;
            console.log(data);
            $.post('/attr/post',data,function(res){
                console.log(res)
            })

        }
        
        function addgroup(){
            if(Object.keys(select_spec_list).length<1){
                return false;
            }
            var group = '';
            for(i in select_spec_list){
                group +=i+'|'+select_spec_list[i]+',';
            }
            group = group.replace(/,$/,'',group);
            if(existgroup(group)){
                console.log('组合属性存在!')
                return false;
            }

            data = group_list[group] = {"name":group,"num":"","price":""};
            console.log('grouplist:',group_list);
            data['auto_id'] = group_auto_id;
            var tmp = tmpRender('#g_item_tmp',data);
            $('#spec_group_list').append(tmp);
            group_auto_id++;

        }
        function deletegroup(group,obj,rowid){
            delete group_list[group];
            $('#'+rowid).remove();
            console.log(group_list)
        }
        //模板渲染
        function tmpRender(id,data){
            var tmp = $(id).html();
            for(i in data){
                console.log(i)
                var reg = new RegExp("{{"+i+"}}", "g" )
                tmp = tmp.replace(reg, data[i]);
            }
            console.log(tmp);
            return tmp;
        }
        //renderSpecList();
        //tmpRender('#spec_items_tmp',{"name":"test"});
    </script>

<script type="text/javascript" charset="utf-8" src="/component/wangeditor/package/dist/wangEditor.js"></script>
<!--
<script src="/component/layui/layui.all.js"></script>
-->
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<!--属性标签-->

<script>
function initEdit(){
    //富文本编辑器设置
    const $text1 = $('#content')
    const E = window.wangEditor;
    const editor = new E("#divedit");
    editor.config.uploadImgServer = '/wangeditor/upload';
    editor.config.uploadVideoServer = '/wangeditor/upvideo';

    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text1.val(html)
    }
    editor.create()
    //end 富文本编辑器
}

//layui 部分
var MODULE_PATH = '/{$controller}/';
var modules = [
    'form','jquery','laydate','upload','laytpl','layer','tag', 'code', 'element'
];

layui.use(modules,function(){
    let form = layui.form;
    $ = layui.jquery; //jquery 外部定义全局化
    let laydate = layui.laydate;
    let upload = layui.upload;

    //富文本编辑器设置
    initEdit()
    
    //常规用法
    laydate.render({
      elem: '#pubdate'
    });
    
    renderSpecList();//渲染属性组

    //属性列表筛选
    let tag = layui.tag,
    laytpl = layui.laytpl; //Tag的切换功能，切换事件监听等，需要依赖tag模块
    layui.code();
    tag.render("speclist", {
        skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
        tagText: '<i class="layui-icon layui-icon-add-1"></i>添加属性' //标签添加按钮提示文本
    });
    var spec_i = 1;
    var layer = layui.layer;
    /*计算数组arr前i个数相乘*/

    form.on('submit(user-save)', function(data){
        let roleIds = "";

        var fields = data.field;

        fields.spec_values = group_list;
        fields.spec_names = spec_info;
        console.log(fields);
        console.log('执行提交动作')
        //fields = JSON.stringify(fields);
        
        $.post(MODULE_PATH+'create', fields, function (result) {
            //... your code
        }, "json");
        
    /*
        $.ajax({
            url:MODULE_PATH+'create',
            data:fields,
            dataType:'json',
            contentType:'application/json',
            type:'post',
            success:function(result){
                if(result.code==1){
                    layer.msg(result.msg,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("user-table");
                    });
                }else{
                    layer.msg(result.msg,{icon:2,time:1000});
                }
            }
        })
        */
        
        return false;
    });


    //分类联动
    var categorys = [{"name":"文具","id":1,"pid":0,"level":1},{"name":"专场推荐","id":2,"pid":0,"level":1},{"name":"热门分类","id":3,"pid":0,"level":1},{"name":"晨光","id":4,"pid":1,"level":2},{"name":"小米","id":5,"pid":1,"level":2},{"name":"得力","id":6,"pid":1,"level":2},{"name":"英雄","id":7,"pid":1,"level":2},{"name":"百乐","id":8,"pid":1,"level":2},{"name":"中性笔","id":9,"pid":4,"level":3},{"name":"铅笔","id":10,"pid":4,"level":3},{"name":"小米中性笔","id":11,"pid":5,"level":3},{"name":"小米铅笔","id":12,"pid":5,"level":3},{"name":"得力中性笔","id":13,"pid":6,"level":3},{"name":"英雄钢笔","id":14,"pid":7,"level":3},{"name":"百乐钢笔","id":15,"pid":8,"level":3}];
    $.get('/goodscate/all', function (result) {
        //... your code
        if(result.code==0){
            categorys = result.data;
            setSelectFirst();
        }
    }, "json");
    


    function setSelectFirst(default_id) {
        var category_select_html = '<option value="">请选择分类</option>';
        for (var i in categorys) {
            if (categorys[i]['pid'] == 0) {
                category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
            }
        }
        $('select[name="first_category_id"]').html(category_select_html);
        $('select[name="first_category_id"]').val(default_id);
        form.render('select');
    }
    function setSelectSecond(default_id, pid) {
        pid = pid === undefined ? $('select[name="first_category_id"]').val() : pid;
        $('select[name="second_category_id"]').html('<option value="">请选择分类</option>');
        $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
        var category_select_html = '<option value="">请选择分类</option>';
        for (var i in categorys) {
            if (categorys[i]['pid'] == pid) {
                category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
            }
        }
        $('select[name="second_category_id"]').html(category_select_html);
        $('select[name="second_category_id"]').val(default_id);
        form.render('select');
    }
    function setSelectThird(default_id, pid) {
        pid = pid === undefined ? $('select[name="second_category_id"]').val() : pid;
        $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
        var first_category_id = $('select[name="first_category_id"]').val();
        var category_select_html = '<option value="">请选择分类</option>';
        for (var i in categorys) {
            if (categorys[i]['pid'] == pid) {
                category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
            }
        }
        $('select[name="third_category_id"]').html(category_select_html);
        $('select[name="third_category_id"]').val(default_id);
        form.render('select');
    }

    form.on('select(first_category)', function (data) {
        setSelectSecond('', data.value);
    });
    form.on('select(second_category)', function (data) {
        setSelectThird('', data.value);
    });
    //分类结束

    //普通图片上传
    var uploadInst = upload.render({
    elem: '#test1'
    ,url: MODULE_PATH+'upload' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    });

    //多图片上传
    upload.render({
    elem: '#test2'
    ,url: MODULE_PATH+'upload' //改成您自己的上传接口
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
      //上传完毕
    }
    });


})


</script>
<script>
</script>
</body>
</html>